<script>
export default {
  name: "global-legend",
  components: {},
  data() {
    return {
      mainTitle: '分层分类面积核算图层',
      subTitle: '分层分类',
      legends: [{
        title: '建筑面积',
        iconColor: '#ff00ff'
      }, {
        title: '建筑面积',
        iconColor: '#0f0f0f'
      }, {
        title: '建筑面积',
        iconColor: '#00ff00'
      }, {
        title: '建筑面积',
        iconColor: '#0000ff'
      }]
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
  },
};
</script>

<template>
  <div class="global-legend font-AlibabaPuhui">
    <div class="main-title">
      <span>{{ mainTitle }}</span>
    </div>
    <div class="sub-title">
      <span>{{ subTitle }}</span>
    </div>
    <div class="legends">
      <div class="legend" v-for="(item, index) in legends" :key="index">
        <div class="icon"
        :style="{
          'background-color': item.iconColor
        }"
        ></div>
        <div class="legend-title">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.global-legend {
  position: fixed;
  // padding: 3.2rem;
  bottom: 5rem;
  right: 18rem;
  border-radius: .5rem;
  background-color: rgba(37, 74, 102, 0.45);
  // backdrop-filter: blur(4px);
  color: #ECF5FD;
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
  }

  &>.main-title {
    font-size: 3.2rem;
    margin-bottom: 3.2rem;
    padding: 3.2rem 3.2rem 0 3.2rem;
  }

  &>.sub-title {
    font-size: 2.8rem;
    opacity: .75;
    margin-bottom: 3.2rem;
    padding: 0 3.2rem;
  }

  &>.legends {
    padding: 0 3.2rem;
    &>.legend {
      display: flex;
      align-items: center;
      margin-bottom: 3.2rem;
      &>.icon {
        width: 2.8rem;
        height: 2.8rem;
      }

      &>.legend-title {
        padding-left: 1rem;
        opacity: .75;
        font-size: 2.8rem;
      }
    }
  }
}
</style>